<template>
	<view class="content">
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="imgs">
				<u-swiper height="300" :autoplay="false" :list="item.imgs" mode="number" bg-color="#fff" effect3d indicator-pos="bottomCenter" :border-radius="0"></u-swiper>
			</view>
			<view class="title" @click="$to('/pages/shoot/info?id=' + item.id)">{{ item.title }}</view>
			<view class="user_info" @click="$to('/pages/shoot/info?id=' + item.id)">
				<image class="user_img" :src="item.outimg"></image>
				<view class="info">
					<view class="name">{{ item.name }}</view>
					<view class="date">{{ item.create_time }}</view>
				</view>
			</view>
		</view>
		<u-loadmore v-show="list.length < pagination.total" :status="loadStatus"></u-loadmore>
		<view class="null" v-if="list.length == 0"><u-empty text="暂无数据" mode="list"></u-empty></view>
	</view>
</template>

<script>
import { shoot_map_list } from '@/api/index.js';
export default {
	data() {
		return {
			list: [],
			pagination: {
				limit: 4, //一页几条
				page: 1, //第几页
				total: 0
			},
			loadStatus: 'loadmore'
		};
	},
	onLoad() {
		this.getList();
	},
	onPullDownRefresh() {
		//下拉刷新
		this.getList();
	},
	onReachBottom() {
		this.loadStatus = 'loading';
		setTimeout(() => {
			if (this.pagination.total == this.list.length) {
				this.loadStatus = 'nomore';
			} else {
				this.getList(true);
			}
		}, 800);
	},
	methods: {
		getList(status = false) {
			if (status) {
				this.pagination.page += 1;
			} else {
				//this.$refs.uWaterfall.clear();
				this.pagination.page = 1; //重新加载
			}
			shoot_map_list(this.pagination).then(res => {
				this.pagination.total = res.data.total;
				uni.stopPullDownRefresh(); //关闭下拉刷新
				if (status) {
					//是否继续加载
					res.data.data.forEach(item => {
						item.imgs = item.imgs.split(',');
						this.list.push(item);
					});
				} else {
					this.list = res.data.data.map(item => {
						item.imgs = item.imgs.split(',');
						return item;
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.content {
	padding: 20rpx;
	.item {
		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		box-shadow: 2rpx 2rpx 8rpx 1rpx #eee;
		background-color: #fff;
		.imgs {
			padding: 20rpx;
		}
		.title {
			padding: 20rpx;
			font-size: 32rpx;
			border-bottom: 1rpx solid #eee;
		}
		.user_info {
			display: flex;
			padding: 20rpx;
			.user_img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 4rpx;
			}
			.info {
				flex: 1;
				padding-left: 20rpx;
				.name {
				}
				.date {
					text-align: right;
				}
			}
		}
	}
}
</style>
